<template>
  <div class="base-form">
    <template v-if="step === 1">
      <h3 class="h3-before">房屋基础信息</h3>
      <van-field
        v-model="formData.jzrks"
        label="1.总居住人数(人)"
        placeholder="请输入"
        required
        type="digit"
        :rules="validator.number1to100"
      />
      <van-field
        v-model="formData.zzrs"
        label="2.租住人数(人)"
        placeholder="请输入"
        required
        type="digit"
        :rules="validator.number2"
      />
      <van-field
        v-model="formData.cs"
        label="3.房屋层数(层)"
        placeholder="请输入"
        required
        @input="onStoreyInput"
        type="digit"
        :rules="validator.number1to7"
      />
      <van-field
        v-model="formData.fjsl"
        label="4.房间数量(个)"
        type="digit"
        placeholder="请输入"
        required
        :rules="validator.number1to100"
      />
      <van-field
        v-model="formData.jzfjs"
        label="5.出租房间数量(个)"
        placeholder="请输入"
        required
        type="digit"
        :rules="validator.number5"
      />
      <van-field
        v-model="formData.bdfwjzrydddzxcsl"
        label="6.本房屋居住人员的电动自行车数量"
        placeholder="请输入"
        required
        type="digit"
        :rules="validator.number"
      />
      <van-field
        class="field-column"
        label="7.充电方式"
        required
        placeholder="请选择"
        :rules="validator.business"
      >
        <template #input>
          <van-checkbox-group v-model="formData.cdfs" direction="horizontal">
            <van-checkbox
              v-for="item in echoData.recharge"
              :name="item"
              :key="item"
              shape="square"
            >
              {{ item }}
            </van-checkbox>
          </van-checkbox-group>
        </template>
      </van-field>
      <van-field
        v-if="formData.cdfs?.includes('其他')"
        v-model="formData.cdfsqtbz"
        label="其他充电方式"
        class="field-textarea field-column"
        placeholder="请输入"
        required
        type="textarea"
        :rules="validator.desc"
      />
      <van-field
        v-model="formData.czryrs"
        label="8.出租人员从事外卖、闪送、代驾等职业的人数"
        placeholder="请输入"
        required
        type="digit"
        :rules="validator.number1to100"
      />
      <van-field
        v-model="formData.cjzwqtjyyt"
        label="9.除居住外是否存在其他经营业态"
        placeholder="请选择"
        required
        :rules="validator.boolean"
      >
        <template #input>
          <van-radio-group v-model="formData.cjzwqtjyyt" direction="horizontal">
            <van-radio
              v-for="item in echoData.boolean"
              :name="item.value"
              :key="item.value"
            >
              {{ item.label }}
            </van-radio>
          </van-radio-group>
        </template>
      </van-field>
      <van-field
        v-if="+formData.cjzwqtjyyt === 1"
        class="field-column"
        placeholder="请选择"
        :rules="validator.business"
      >
        <template #input>
          <van-checkbox-group
            v-model="formData.cjzwqtjyytmsg"
            direction="horizontal"
          >
            <van-checkbox
              v-for="item in echoData.business"
              :name="item"
              :key="item"
              shape="square"
            >
              {{ item }}
            </van-checkbox>
          </van-checkbox-group>
        </template>
      </van-field>
    </template>

    <template v-if="step === 2">
      <h3 class="h3-before">安全疏散</h3>
      <van-field
        v-model="formData.jzscmj"
        label="1.房屋建筑面积(平方米)"
        placeholder="请输入"
        required
        type="number"
        :rules="validator.number"
      />
      <van-field
        v-model="formData.jzscxyaqcksl"
        label="2.房屋首层现有安全出口的数量(个)"
        placeholder="请输入"
        required
        type="digit"
        :rules="validator.number1to10"
      />
      <van-field
        v-model="formData.jzxyssltsl"
        label="3.房屋现有疏散楼梯的数量(个)"
        placeholder="请输入"
        required
        type="digit"
        :rules="validator.number1to10"
      />
      <van-field
        v-model="formData.ckfhwggptzlsl"
        label="4.窗口防护网、广告牌、铁栅栏数量(个)"
        placeholder="请输入"
        required
        type="digit"
        :rules="validator.number1to100"
      />
      <van-field
        v-model="formData.sfszsszsbzhaqckbz"
        label="5.是否设置疏散指示标志和安全出口标志"
        placeholder="请选择"
        required
        :rules="validator.boolean"
      >
        <template #input>
          <van-radio-group
            v-model="formData.sfszsszsbzhaqckbz"
            direction="horizontal"
          >
            <van-radio
              v-for="item in echoData.boolean"
              :name="item.value"
              :key="item.value"
            >
              {{ item.label }}
            </van-radio>
          </van-radio-group>
        </template>
      </van-field>
      <template v-if="echoData.storeyCount >= 2">
        <van-field
          v-model="formData.sfazfztsss"
          label="6.是否安装软梯逃生绳等辅助逃生设施"
          placeholder="请选择"
          required
          :rules="validator.boolean"
        >
          <template #input>
            <van-radio-group
              v-model="formData.sfazfztsss"
              direction="horizontal"
            >
              <van-radio
                v-for="item in echoData.boolean"
                :name="item.value"
                :key="item.value"
              >
                {{ item.label }}
              </van-radio>
            </van-radio-group>
          </template>
        </van-field>
        <van-field
          v-model="formData.ywgdlttxwd"
          label="7.楼内有无固定楼梯通向屋顶或室外平台"
          placeholder="请选择"
          required
          :rules="validator.boolean"
        >
          <template #input>
            <van-radio-group
              v-model="formData.ywgdlttxwd"
              direction="horizontal"
            >
              <van-radio
                v-for="item in echoData.haveOrNot"
                :name="item.value"
                :key="item.value"
              >
                {{ item.label }}
              </van-radio>
            </van-radio-group>
          </template>
        </van-field>
      </template>
      <van-field
        :label="
          echoData.storeyCount >= 2
            ? '8.是否按标准建设疏散通道'
            : '6.是否按标准建设疏散通道'
        "
        placeholder="请选择"
        required
        :rules="validator.boolean"
      >
        <template #input>
          <van-radio-group
            v-model="formData.jsrysstd"
            direction="horizontal"
            :disabled="+formData.cs === 1"
            @click="onBuildClick"
          >
            <van-radio
              v-for="item in echoData.exit"
              :name="item.value"
              :key="item.value"
              :disabled="item.disabled"
            >
              {{ item.label }}
            </van-radio>
          </van-radio-group>
        </template>
      </van-field>
      <van-field
        class="field-column"
        :rules="validator.image"
      >
        <template #input>
          <component :is="upload" :limit="5" v-model="formData.sfmzstdPhoto" />
        </template>
      </van-field>
      <van-field
				v-if="formData.jsrysstd ==='否'"
				v-model="formData.sfmzstdMsg"
				label="隐患描述"
				class="field-textarea field-column"
				placeholder="请输入"
				type="textarea"
			/>
    </template>

    <template v-if="step === 3">
      <h3 class="h3-before">设施器材</h3>
      <van-field
        v-model="formData.mhqsl"
        label="1.灭火器数量(个)"
        placeholder="请输入"
        required
        type="digit"
        :rules="validator.number"
      />
      <van-field
        v-model="formData.fytsmz"
        label="2.防烟逃生面罩数量(套)"
        placeholder="请输入"
        required
        type="digit"
        :rules="validator.number"
      />
      <van-field
        v-model="formData.jzsyjyplmhxts"
        label="3.房屋简易消防喷头数量(个)"
        placeholder="请输入"
        required
        type="digit"
        :rules="validator.number"
      />
      <van-field
        v-model="formData.jzszlwxdlgybjqs"
        label="4.房屋烟感报警器数量(个)"
        placeholder="请输入"
        required
        type="digit"
        :rules="validator.number"
      />
    </template>

    <template v-if="step === 4">
      <h3 class="h3-before">其他</h3>
      <van-field
        v-model="formData.xggdjsbp"
        label="1.悬挂固定警示标牌数量(张)"
        placeholder="请输入"
        required
        type="digit"
        :rules="validator.number"
      />
      <van-field
        v-model="formData.wdwhjgfjgqsyyrkrgbdj"
        label="2.是否存在夹芯彩钢板出租住人"
        placeholder="请选择"
        required
        :rules="validator.boolean"
      >
        <template #input>
          <van-radio-group
            v-model="formData.wdwhjgfjgqsyyrkrgbdj"
            direction="horizontal"
          >
            <van-radio
              v-for="item in echoData.boolean"
              :name="item.value"
              :key="item.value"
            >
              {{ item.label }}
            </van-radio>
          </van-radio-group>
        </template>
      </van-field>
       <!-- 是否存在夹芯彩钢板出租住人 选择是 加照片 -->
      <van-field
        v-if="formData.wdwhjgfjgqsyyrkrgbdj === '1'"
        class="field-column"
        :rules="validator.image"
      >
        <template #input>
          <component :is="upload" :limit="5" v-model="formData.sfczjxgbczzrPhoto" />
        </template>
      </van-field>
      <!-- 是否存在夹芯彩钢板出租住人 选择是 加描述 -->
      <van-field
				v-if="formData.wdwhjgfjgqsyyrkrgbdj === '1'"
				v-model="formData.sfczjxgbczzrMsg"
				label="隐患描述："
				class="field-textarea field-column"
				placeholder="请输入"
				type="textarea"
			/>
      <van-field
        v-model="formData.sstdsyyrkrclzx"
        label="3.疏散通道使用易燃可燃材料装修"
        placeholder="请选择"
        required
        :rules="validator.boolean"
      >
        <template #input>
          <van-radio-group
            v-model="formData.sstdsyyrkrclzx"
            direction="horizontal"
          >
            <van-radio
              v-for="item in echoData.boolean"
              :name="item.value"
              :key="item.value"
            >
              {{ item.label }}
            </van-radio>
          </van-radio-group>
        </template>
      </van-field>
     <!-- 疏散通道使用易燃可燃材料装修 选择是 加照片 -->
      <van-field
        v-if="formData.sstdsyyrkrclzx === '1'"
        class="field-column"
        :rules="validator.image"
      >
        <template #input>
          <component :is="upload" :limit="5" v-model="formData.sstdsyyrkrclzxPhoto" />
        </template>
      </van-field>
      <!-- 疏散通道使用易燃可燃材料装修 选择是 加描述 -->
      <van-field
				v-if="formData.sstdsyyrkrclzx === '1'"
				v-model="formData.sstdsyyrkrclzxMsg"
				label="隐患描述"
				class="field-textarea field-column"
				placeholder="请输入"
				type="textarea"
			/>
      <van-field
        v-model="formData.gryssdcsszblyyqksddp"
        label="4.供人员疏散的场院、内院、天井设置不利于烟气扩散的顶棚、雨棚等"
        placeholder="请选择"
        required
        :rules="validator.boolean"
      >
        <template #input>
          <van-radio-group
            v-model="formData.gryssdcsszblyyqksddp"
            direction="horizontal"
          >
            <van-radio
              v-for="item in echoData.boolean"
              :name="item.value"
              :key="item.value"
            >
              {{ item.label }}
            </van-radio>
          </van-radio-group>
        </template>
      </van-field>
      <!--供人员疏散的场院、内院、天井设置不利于烟气扩散的顶棚、雨棚等 选择是 加照片 -->
      <van-field
        v-if="formData.gryssdcsszblyyqksddp === '1'"
        class="field-column"
        :rules="validator.image"
      >
        <template #input>
          <component :is="upload" :limit="5" v-model="formData.gryssdcsszblyyqksddpPhoto" />
        </template>
      </van-field>
      <van-field
				v-if="formData.gryssdcsszblyyqksddp === '1'"
				v-model="formData.gryssdcsszblyyqksddpMsg"
				label="隐患描述"
				class="field-textarea field-column"
				placeholder="请输入"
				type="textarea"
			/>
      <van-field
        v-model="formData.fwyfwdddzxccdsssfayqjshsf"
        label="5.服务于房屋的电动自行车充电设施是否按要求建设和收费"
        placeholder="请选择"
        required
        :rules="validator.boolean"
      >
        <template #input>
          <van-radio-group
            v-model="formData.fwyfwdddzxccdsssfayqjshsf"
            direction="horizontal"
          >
            <van-radio
              v-for="item in echoData.boolean2"
              :name="item.value"
              :key="item.value"
            >
              {{ item.label }}
            </van-radio>
          </van-radio-group>
        </template>
      </van-field>
      <!-- 服务于房屋的电动自行车充电设施是否按要求建设 选择是 加照片 -->
      <van-field
        v-if="formData.fwyfwdddzxccdsssfayqjshsf === '0'"
        class="field-column"
        :rules="validator.image"
      >
        <template #input>
          <component :is="upload" :limit="5" v-model="formData.fwyfwdddzxccdsssfayqjshsfPhoto" />
        </template>
      </van-field>
      <van-field
				v-if="formData.fwyfwdddzxccdsssfayqjshsf === '0'"
				v-model="formData.fwyfwdddzxccdsssfayqjshsfMsg"
				label="隐患描述:"
				class="field-textarea field-column"
				placeholder="请输入"
				type="textarea"
			/>
    </template>
  </div>
</template>

<script setup>
import { reactive, defineProps, watch } from "vue";
import upload from '@/components/upload'
const props = defineProps({
  formData: {
    type: Object,
    default: () => {},
  },
  initData: {
    type: Object,
    default: () => {},
  },
  step: {
    type: Number,
    default: 1,
  },
});


const validateMax100 = (val) =>
  new Promise((resolve) => {
    if (val <= 500) {
      resolve(true)
    } else {
      resolve(false)
    }
  })
const validateMax10 = (val) =>
  new Promise((resolve) => {
    if (val <= 10) {
      resolve(true)
    } else {
      resolve(false)
    }
  })
const validateMax7 = (val) =>
  new Promise((resolve) => {
    if (val <= 7) {
      resolve(true)
    } else {
      resolve(false)
    }
  })

const validateDep1 = (val) =>
  new Promise((resolve) => {
    if (+val <= +props.formData.jzrks) {
      resolve(true)
    } else {
      resolve(false)
    }
  })
const validateDep4 = (val) =>
  new Promise((resolve) => {
    if (+val <= +props.formData.fjsl) {
      resolve(true)
    } else {
      resolve(false)
    }
  })
const validateImage = (val) =>
  new Promise((resolve) => {
    if (val?.length >= 2 && val?.length <= 5) {
      resolve(true)
    } else {
      resolve(false)
    }
  })

const validateNumber = (val) =>
  new Promise((resolve) => {
    if (val && val >= 0) {
      resolve(true);
    } else {
      resolve(false);
    }
  });

const validateNumber1 = (val) =>
  new Promise((resolve) => {
    if (val && val >= 1) {
      resolve(true);
    } else {
      resolve(false);
    }
  });

const echoData = reactive({
  storeyCount: 0,
  business: [
    "餐饮",
    "商店",
    "美容美发",
    "KTV",
    "网吧",
    "美甲美睫",
    "棋牌室",
    "茶社",
    "足疗、按摩",
    "教学培训",
    "医疗诊所",
    "加工生产",
    "其它",
  ],
  boolean: [
    { label: "是", value: "1" },
    { label: "否", value: "0" },
  ],
  boolean2: [
    { label: '无问题', value: '1' },
		{ label: '有问题', value: '0' },
    { label: "不涉及", value: "2" },
  ],
  exit: [
    { label: "是", value: "是" },
    { label: "否", value: "否" },
  ],
  haveOrNot: [
    { label: "有", value: "1" },
    { label: "无", value: "0" },
  ],
  status1: [
    "建筑室内增设疏散楼梯",
    "建筑室外或内天井增设疏散楼梯",
    "利用相邻或相近建筑疏散",
  ],
  status2: ["正在制定方案", "正在施工改造"],
  recharge: ["单插口", "集中充电桩", "单仓口", "充(换)电柜", "其他"],
});
const validator = {
  number1to100: [
    { validator: validateNumber, message: '请输入正数' },
    { validator: validateMax100, message: '最大值不能超过500' },
  ],
  number1to10: [
    { validator: validateNumber, message: '请输入正数' },
    { validator: validateMax10, message: '最大值不能超过10' },
  ],
  //第2项专用
  number2: [
    { validator: validateNumber, message: '请输入正数' },
    { validator: validateMax100, message: '最大值不能超过500' },
    { validator: validateDep1, message: '不能超过总居住人数' },
  ],
  //第5项专用
  number5: [
    { validator: validateNumber, message: '请输入正数' },
    { validator: validateMax100, message: '最大值不能超过500' },
    { validator: validateDep4, message: '不能超过总房间数' },
  ],
  number1to7: [
    { validator: validateNumber1, message: '最小值为1' },
    { validator: validateMax7, message: '最大值不能超过7' },
  ],
  number: [
    { required: true, message: "请输入" },
    { validator: validateNumber, message: "请输入正数" },
  ],
  number1: [
    { required: true, message: "请输入" },
    { validator: validateNumber1, message: "最小值为1" },
  ],
  business: [{ required: true, message: "请选择" }],
  boolean: [{ required: true, message: "请选择" }],
  image: [
    { required: true, message: '请上传图片' },
    { validator: validateImage, message: '图片数量为2-5张' }
  ],
};

const onBuildClick = () => {
  // eslint-disable-next-line vue/no-mutating-props
  props.formData.sstdjsqk = props.formData.jsrysstd === "是" ? [] : "";
};

const onStoreyInput = (e) => {
  echoData.storeyCount = +e.target.value;
};

watch(() => props.initData?.id, () => {
  echoData.storeyCount = props.initData?.data?.cs
}, { immediate: true, deep: true })

watch(() => props.formData, () => {
  if (+props.formData.cs === 1) {
    if (+props.formData.jzscmj < 200 && +props.formData.jzscxyaqcksl >= 1) {
      props.formData.jsrysstd = '是'
    } else if (+props.formData.jzscmj >= 200 && +props.formData.jzscxyaqcksl >= 2) {
      props.formData.jsrysstd = '是'
    } else {
      props.formData.jsrysstd = '否'
    }
  }
  // if (props.formData.cs > 2) {
  //   if (props.formData.jzxyssltsl >= 2 && props.formData.jzscxyaqcksl >= 2) {
  //     props.formData.jsrysstd = '是'
  //   } else {
  //     props.formData.jsrysstd = '否'
  //   }
  // }
}, { immediate: true, deep: true })

// 添加watch监听wdwhjgfjgqsyyrkrgbdj字段变化
watch(() => props.formData.wdwhjgfjgqsyyrkrgbdj, (newVal) => {
  if (newVal === '0') {
    // 当选择"否"时，清除照片数据
    props.formData.sfczjxgbczzrPhoto = []
    props.formData.sfczjxgbczzrMsg = ''
  }
})
// 疏散通道使用易燃可燃材料装修
watch(() => props.formData.sstdsyyrkrclzx, (newVal) => {
  if (newVal === '0') {
    // 当选择"否"时，清除照片/隐患描述
    props.formData.sstdsyyrkrclzxPhoto = []
    props.formData.sstdsyyrkrclzxMsg = ''
  }
})
// 供人员疏散的场院、内院、天井设置不利于烟气扩散的顶棚、雨棚等
watch(() => props.formData.gryssdcsszblyyqksddp, (newVal) => {
  if (newVal === '0') {
    // 当选择"否"时，清除照片/隐患描述
    props.formData.gryssdcsszblyyqksddpPhoto = []
    props.formData.gryssdcsszblyyqksddpMsg = ''
  }
})
// 服务于房屋的电动自行车充电设施是否按要求建设
watch(() => props.formData.fwyfwdddzxccdsssfayqjshsf, (newVal) => {
  if (newVal !== '0') {
    // 当选择"否"时，清除照片数据
    props.formData.fwyfwdddzxccdsssfayqjshsfPhoto = []
    props.formData.fwyfwdddzxccdsssfayqjshsfMsg = ''
  }
})
// 是否按标准建设疏散通道
watch(() => props.formData.jsrysstd, (newVal) => {
  console.log('@newVal=====是否按标准建设疏散通道', newVal)
  if (newVal === '是') {
    // 当选择"否"时，清除照片数据
    props.formData.sfmzstdPhoto = []
    props.formData.sfmzstdMsg = ''
  }
})
</script>

<style scoped lang="less">
.base-form {
  h3 {
    margin: 24px 0 12px;
  }
}
</style>
